<template>
  <div class="main-container">
    <!-- ================================================== -->
    <!-- ================================================== -->
    <!-- ========== 发票页面功能/查询区 ===================== -->
    <!-- ================================================== -->
    <!-- ================================================== -->
    <el-form inline :model="queryParam">
      <el-form-item>
        <el-button type="primary" @click="toCreateFapiao">新建发票申请</el-button>
      </el-form-item>

      <el-form-item label="客户名称">
        <el-input v-model="queryParam.customer"></el-input>
      </el-form-item>
      <el-form-item label="开票时间">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryReq">查询</el-button>
        <el-button type="primary" @click="initQueryParam">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="total mb10" v-for="(item, index) in totalLabel" :key="index">
      <div class="total_title" :style="{ backgroundColor: item.color }">{{ item.name }}</div>
      <el-button size="small" class="total_btn" :class="curState == item.name ? 'bg-red' : ''" @click="changeState(item)">{{ count[item.type] }}</el-button>
    </div>
    <!-- ================================================== -->
    <!-- ================================================== -->
    <!-- ========== 发票申请信息表格 =========================== -->
    <!-- ================================================== -->
    <!-- ================================================== -->
    <el-table border :data="formList" default-expand-all row-key="fapiaoId">
      <el-table-column label="序号" type="index" align="right" width="50"></el-table-column>
      <el-table-column prop="invoicingDate" label="申请开票时间" align="center" width="110"> </el-table-column>
      <el-table-column prop="workingNumber" label="工号" align="center" width="100"></el-table-column>
      <el-table-column prop="customer" label="开票客户" align="center" width="200"></el-table-column>
      <el-table-column prop="customerFinal" label="最终客户" align="center" width="120"></el-table-column>
      <el-table-column prop="amount" label="价税金额" align="center" width="120">
        <template scope="scope">
          <span>￥{{ scope.row.amount }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="发票内容" align="center" min-width="200"> </el-table-column>
      <el-table-column prop="state.string" label="状态" align="center" width="150"> </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100">
        <template slot-scope="scope">
          <el-button @click="showDetail(scope.row)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="queryParam.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count.totalNum"
      background
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import _ from 'lodash'

import { getFapiaoApplicationListApi } from '@/api/api_fapiao_application'

@Component({
  components: {}
})
export default class Material extends Vue {
  count: any = {
    totalNum: 0,
    submitNum: 0,
    preauditNum: 0,
    auditNum: 0,
    approvalNum: 0,
    completedNum: 0,
    closedNum: 0
  }

  dateRange: any = []
  queryParam: any = {
    customer: '',
    beginDate: '',
    endDate: '',
    page: 1,
    pageSize: 10
  }
  formList: any = []
  curState: string = '申请总数'
  totalLabel: any[] = [
    { name: '申请总数', code: -1, color: '#666666', type: 'totalNum' },
    { name: '未提交', code: 0, color: '#ff0000', type: 'submitNum' },
    { name: '待初审', code: 1, color: '#ff9900', type: 'preauditNum' },
    { name: '待审核', code: 3, color: '#ff9900', type: 'auditNum' },
    { name: '待批准', code: 5, color: '#ffcc00', type: 'approvalNum' },
    { name: '审批完成', code: 7, color: '#3399cc', type: 'completedNum' },
    { name: '已关闭', code: 8, color: '#808080', type: 'closedNum' }
  ]

  created() {
    this.queryReq()
  }

  async queryReq() {
    if (this.dateRange && this.dateRange.length > 0) {
      this.queryParam.beginDate = this.dateRange[0].toJSON().substring(0, 10)
      this.queryParam.endDate = this.dateRange[1].toJSON().substring(0, 10)
    } else {
      this.queryParam.beginDate = null
      this.queryParam.endDate = null
    }

    await getFapiaoApplicationListApi(this.queryParam).then(res => {
      this.formList = res.data.list
      this.count = res.data.count
    })
  }
  changeState(data) {
    this.curState = this.queryParam.state = data['code']
    this.queryParam.page = 1
    this.queryReq()
  }

  initQueryParam() {
    this.dateRange = null
    this.queryParam = {
      customer: '',
      state: -1,
      beginDate: '',
      endDate: '',
      page: 1,
      pageSize: 10
    }
  }

  toCreateFapiao() {
    this.$router.push({ name: 'fapiao-detail', params: { type: 'create' } })
  }

  showDetail(row) {
    this.$router.push({ name: 'fapiao-detail', params: { type: 'detail', fapiaoId: row.fapiaoId } })
  }

  pageChange(newPage) {
    this.queryParam.page = newPage
    this.queryReq()
  }
  pageSizeChange(newSize) {
    this.queryParam.pageSize = newSize
    this.queryReq()
  }
}
</script>

<style lang="scss" scoped>
.total {
  float: left;
  border: 1px solid #ccc;
  margin-right: 10px;
  .total_title {
    width: 100px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ccc;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  .total_btn {
    height: 50px;
    width: 100px;
    border-radius: 0;
    border: none;
    font-size: 28px;
    &:hover {
      color: #000;
      background: #fff;
    }
    &:focus {
      background: #ff0000;
      color: #fff;
    }
  }
}
</style>
